<template>
  <div>
    <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px; margin: 0 0 0 10px;"></canvas>
  </div>
</template>
<script>
import UQRCode from "../../uni_modules/uqrCode/js_sdk/uqrcode/uqrcode.js";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
export default defineComponent({
  props: {
    //最大长度 值为4或者6
    text: {
      type: String,
      default: "",
    },
    //输入内容
    size: {
      type: Number,
      default: 90,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      imgUrl: "",
    });

    onMounted(() => {
      getLoad();
    });

    // 初始化
    const getLoad = async () => {
      // 获取uQRCode实例
      var qr = new UQRCode();
      // 设置二维码内容
      qr.data = props.text;
      // 设置二维码大小，必须与canvas设置的宽高一致
      qr.size = props.size;
      qr.backgroundColor = "#ffffff";
      qr.margin = 8;
      // 调用制作二维码方法
      qr.make();
      // 获取canvas上下文
      var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
      // 设置uQRCode实例的canvas上下文
      qr.canvasContext = canvasContext;
      // 调用绘制方法将二维码图案绘制到canvas上
      qr.drawCanvas();
      uni.canvasToTempFilePath({
        x: 0, // 起点坐标
        y: 0,
        width: qr.size, // canvas 宽
        height: qr.size, // canvas 高
        canvasId: "qrcode", // canvas id
        success(res) {
          emit("callback", res.tempFilePath);
        },
      });
    };

    return {
      ...toRefs(state),
      getLoad,
    };
  },
});
</script>

<style lang="scss">
@import "@/asstes/css/classManage/index.scss";
</style>
